<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>注册</title>
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min-3.4.0.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/font-awesome-4.3.0.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/custom.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/animate.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/style-2.2.0.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/index.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/lyq/modelStyle.css">
    <link href="${pageContext.request.contextPath}/css/lyq/modelStyle.css" rel="stylesheet">

</head>

<body class="gray-bg">
<div class="middle-box text-center loginscreen animated fadeInDown">
    <div class="form-signin" id="app">
        <div id="stage">
            <div id="inner">
                <div id="cover">
                    <div id="text">
                        <span style="color: cyan;">H</span><span style="color: white;">+</span>
                    </div>
                    <div id="detail"></div>
                    <div id="handle"></div>
                </div>
                <canvas class="mb-4" id="live2d" width="800" height="800"></canvas>
            </div>
            <a id="info" href="javascript:info()"><i class="fa fa-lg fa-info"></i></a>
            <a id="refresh" href="javascript:refresh()"><i class="fa fa-lg fa-refresh"></i></a>
        </div>
        <h3>找回密码</h3>
        <p>用密保手机试着找回吧~</p>
        <!-- <form class="m-t" role="form" method="post" action="submitFindPwd.html"> -->
        <form class="m-t" id="regForm">

            <div class="form-group">
                <input name="userName" type="text" class="form-control" placeholder="请输入账号" required="username">
            </div>
            <div class="form-group" style="width: 400px;">
                <input id="phone" name="phone" type="text" class="form-control" placeholder="请输入密保手机" required="phone"
                       style="width: 270px;float: left;margin-bottom: 10px;"/>
                <input id="checkForm" href="#" class="btn btn-primary block m-b" type="button" value="发送验证码"
                       style="width: 100px;float: left;line-height: 20px;margin: 10px;"/>
            </div>
            <div class="form-group">
                <input id="confirm" name="messageCode" type="text" class="form-control" placeholder="请输入短信验证码"
                       required="messageCode"/>
            </div>
            <!-- <button type="submit" class="btn btn-primary block full-width m-b" onclick="returns mm();">提交</button> -->
            <input type="button" class="btn btn-primary block full-width m-b" id="signIn" value="提交"></input>
            <p class="text-muted text-center"><small>已经有账户了？</small><a href="login.jsp">点此登录</a>
            </p>
            <img src="static/picture/1.gif" style="width: 100%;">
        </form>

        <button id="showMsg" type="button" class="btn btn-default" data-toggle="popover" title="您的账号信息为："
                data-content="" style="display: none">点击可查看您的账号信息哦~
        </button>

    </div>
</div>
</div>
<div id="modal-container">
    <div class="modal-background">
        <div class="modal">

        </div>
    </div>
</div>
<!-- Mainly scripts -->
<script src="${pageContext.request.contextPath}/static/js/jquery-2.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min-3.4.0.js"></script>
<script src="${pageContext.request.contextPath}/static/js/live2d.min.js"></script>
<!-- iCheck -->
<script src="${pageContext.request.contextPath}/static/js/icheck.min.js"></script>
<!-- Jquery Validate -->
<script src="${pageContext.request.contextPath}/static/js/jquery.validate.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/index.js"></script>

<script>
    $(function () {
        $('[data-toggle="popover"]').popover()
    })

    $(document).ready(function () {
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });

        $("#regForm").validate({
            rules: {
                //可直接校验两个内容的值是否相等，返回equalTo的内容
                confirm: {
                    //equalTo: "code"
                }
            },
            messages: {
                username: {
                    required: "请输入您的用户名"
                },
                phone: {
                    required: "请输入您的手机号"
                },
                messageCode: {
                    required: "请先输入验证码哦~",
                    equalTo: "验证码错误，请重新输入~"
                },
            }
        });
    });

    $('#modal-container').click(function () {
        $(this).removeClass('three').addClass('out');
        // $("#modal-container").attr("style","display:none");
        $('body').removeClass('modal-active');
    });

    //点击发送验证码，需先校验手机号
    $("#checkForm").click(function () {
        // 获取输入值
        var account = {};
        var data = $("#regForm").serialize().split("&");
        console.log("获取到的表单元素data====：", data);
        for (let i = 0; i < data.length; i++) {
            var params = data[i].split("=");
            account[params[0]] = params[1];
        }

        $.post("/findPwdContoller/getAccountByNameAndPhone", $("#regForm").serialize()).then(function (data) {

            var value = Math.floor(Math.random() * 4000 + 1000);  //生成验证码
            console.log(value);

            if (account.phone == data.phone) {
                $.ajax({
                    url: "https://itdage.com/kkb/kkbsms",
                    data: {
                        key: 'xzk',
                        number: data.phone,
                        code: value
                    },
                    type: "GET"
                })
                //手机号验证成功，发送短信后。点击提交，校验验证码
                alert("已经发送成功啦~快看看您的短信吧~")

                $("#signIn").click(function () {

                    console.log($("#confirm").val());
                    if ($("#confirm").val() == value) {
                        // alert("尊敬的" + data.realName + "用户,您的密码为：" + data.passWord + "快快登录吧~");
                        //开启弹出框，把用户信息弹框给用户查看，方便登录
                        // $("#signIn").attr("style","display: none")//隐藏提交按钮
                        // $("#showMsg").attr("style","display: ''");  //显示弹出框按钮
                        $("#signIn").val("点击查看用户信息"); //修改提示框按钮文案
                        $('#modal-container').removeAttr('class').addClass('three');
                        $('body').addClass('modal-active');
                        $('.modal').html("尊敬的用户：" + data.realName + "<br/>您的登录密码为：" + data.passWord + "<br/>上次登录时间：" + data.loginTime + "<br/>快快登录吧~")
                        return false;
                    } else {
                        alert("验证码输入错误哦，请重新看看短信吧~");
                    }
                })
            } else if ($("#confirm").val() == "") {
                alert("密保手机号有误哦~再想想吧~");
            } else {
                alert("您输入的密保手机号有误哦~再想想吧~");
            }

        }, "json")
    })

    $("#signIn").click(function () {
        var account = {};
        var data = $("#regForm").serialize().split("&");
        console.log("获取到的表单元素data====：", data);
        for (let i = 0; i < data.length; i++) {
            var params = data[i].split("=");
            account[params[0]] = params[1];
        }

        for (let item in account) {
            console.log(account[item], 'item.........');
            if (item === 'userName' && !account[item]) {
                window.alert('账号不能为空');
                return;
            } else if (item === 'phone' && !account[item]) {
                window.alert('密保手机不能为空');
                return;
            } else if (item === 'messageCode' && !account[item]) {
                window.alert('短信验证码不能为空');
                return;
            }
        }
    })

    function stop() {
        return false;
    }
</script>
</body>

</html>
